<!doctype html>
<html>
<head>
<title>pinball</title>
<meta charset="utf-8">
<style>
  h1 {
	float:right
  }
  body {
	font-family: helvetica, arial, sans-serif;
  }
</style>
</head>
<body>
<canvas id="arena" width="350" height="500"></canvas>

<video id="awesome" controls></video>
<script src="schema.js"></script>
<script src="lib.js"></script>
<script src="whammy.js"></script>
<script src="api.js"></script>

<script>


    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
 

      var ctx = document.getElementById('arena').getContext('2d');
      var lines = [
          [10, 10, 10, 300],
          [10, 10, 300, 10],
          [10, 300, 300, 400],
          [300, 10, 300, 400],
          [100, 10, 200, 150]
        ];
      for(var brad = 32, bx = 100, by = 100, i = 0, pf = Math.PI/8; i < 2 * Math.PI; i+= pf){
        lines.push([
            bx + brad * Math.cos(i),
            by + brad * Math.sin(i),
            bx + brad * Math.cos(i - pf),
            by + brad * Math.sin(i - pf)
          ])
      }
      var x = 50, y = 50;
      var vx = 0, vy = 0;
      var r = 10;
      function frame(){
        ctx.fillStyle = 'white'
        ctx.fillRect(0,0,1000,1000)
        ctx.fillStyle = 'black'
        //ctx.clearRect(0,0,1000,1000);
        ctx.beginPath();
        x += vx;
        y += vy;
        vy += 0.1; //gravity
        for(var i = lines.length; i--;){
          var l = lines[i];
          ctx.moveTo(l[0], l[1]);
          ctx.lineTo(l[2], l[3]);
          //var lt = Math.atan2(l[3] - l[1], l[2] - l[0])
          var a1 = -vy, b1 = vx;
          var a2 = -(l[1] - l[3]), b2 = l[0] - l[2];
          var c1 = a1 * x + b1 * y;
          var c2 = a2 * l[0] + b2 * l[1];
          var ix = (b2 * c1 - b1 * c2)/(a1 * b2 - a2 * b1);
          //var iy = (b2 * c1 - b1 * c2)/(a1 * b2 - a2 * b1);//(c1 - a1 * ix)/b1;
          var iy = (c1 * a2 - a1 * c2)/(b1 * a2 - a1 * b2);
          //a1 * x + b1 * y = c1
          //a2 * x + b2 * y = c2
          /*
          for(var k = 0; k < 200; k++){
            ctx.fillRect(k, (c1 - a1 * k)/b1, 2, 2);    
          }
          for(var k = 0; k < 200; k++){
            ctx.fillRect(k, (c2 - a2 * k)/b2, 2, 2);    
          }
          */
          //console.log(ix, iy);
          //ctx.fillRect(ix - 2, iy - 2, 4, 4);
          ctx.moveTo(x, y);
          //ctx.lineTo(x + , iy);
          //console.log(ix, iy)
          //ctx.moveTo(x, y);
          //ctx.lineTo(x + vx * 30, y + vy * 30);
          //todo: extend each line by a unit vector before testing
          var xx = Math.max(l[0], l[2]) + 1, nx = Math.min(l[0], l[2]) - 1;
          var xy = Math.max(l[1], l[3]) + 1, ny = Math.min(l[1], l[3]) -1 ;
          if(ix > x == vx > 0 && iy > y == vy > 0){
            //console.log('directionality passed');
            if(ix <= xx && ix >= nx && iy <= xy && iy >= ny){
              //console.log('bounding intercept passed');
              var d2 = (ix - x) * (ix - x) + (iy - y) * (iy - y);
              var mag = Math.sqrt(vx*vx + vy * vy);
              ctx.fillRect(ix - 2, iy - 2, 4, 4);
              if(Math.sqrt(d2) <= (r + mag + 1)){
                //console.log('distance passed');
                //rotate
                //console.log('carl sagan');
                var la = Math.atan2(l[3] - l[1], l[2] - l[0]);
                var ba = Math.atan2(vy, vx);
                var da = 2 * la - ba;
                //da = 2 * la - da;
                //if(i == 2) mag += (Math.random() - 0.5);
                //mag *= 0.99;
                vx =  mag * Math.cos(da);
                vy = mag * Math.sin(da);
                //console.log(mag)
                //break;
                //console.log(vx, vy);
              }
            }
          }
        }
        var mag = Math.sqrt(vx*vx + vy * vy);
        //ctx.fillRect(0, 0, mag * 10, 20);
        //ctx.fillRect(0, 20, 5 * Math.sqrt(vx * vx + vy * vy + 500 - y), 20);
        //ctx.fillRect(0, 40, Math.abs(vy * 10), 20);
        ctx.moveTo(x + r,y);
        ctx.arc(x,y,r,0,Math.PI*2,false);
        
        ctx.stroke();

        return ctx.canvas.toDataURL('image/webp', 0)
      }

var frames = 150;



var awesome = document.getElementById('awesome');

var start = Date.now();
var images = [];
var loopnum = 0;
function addFrame(){
  images.push(frame());
  
  if(loopnum == frames){
    var timeElapsed = Date.now() - start;
    var fps = frames / (timeElapsed / 1000);
    
    var video = Whammy.generateWebM(images, fps);
    awesome.src = video;
  }else{
    loopnum++;
    //setTimeout(addFrame, 100)
    requestAnimFrame(addFrame)
  }
}

addFrame();

</script>
</body>
</html>
